/* estilos CSS */



	html {
		height:100%;
		width:100%;
		margin:0;
		padding:0;
		
		}


	body {

		margin:0;
		height:100%;
		background: #FFF url("stripes.png") repeat left top;
		font-family:Oxygen;
		font-size:1.1em;
		color:#666;
		
		}



	#generic {
		width:75%;
		background-color:#FA5858;
		padding:2% 0;
		margin:0 auto;
		box-shadow: 0px 0px 9px #666;
   		 -moz-box-shadow: 0px 0px 9px #666;
  		 -webkit-box-shadow: 0px 0px 9px #666;
		
		}


	header {

		border-bottom:1px solid #000;
		
		}

	#main {
	
 	 	 display: -webkit-flex;
  		 display:         flex;
 		  -webkit-flex-flow: row;
 		          flex-flow: row;
		
		


		}


	#main > section {

 		  -webkit-flex: 3 1 60%;
 		          flex: 3 1 60%;
 		  -webkit-order: 2;
  		         order: 2;
	
		}

	#main > aside {

  		 -webkit-flex: 1 6 20%;
  		         flex: 1 6 20%;
 		  -webkit-order: 3;
 		          order: 3;

		}


	#main > nav {

  		 -webkit-flex: 1 6 20%;
   		        flex: 1 6 20%;
  		 -webkit-order: 1;
  		         order: 1;

		}

	#portfolio {
		
		width:100%;
	  display:  flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox; /*IE 10*/
						flex-flow:row;
		-webkit-flex-flow:row;
						flex-wrap:wrap;
		-webkit-flex-wrap:wrap;

		
	}


	#portfolio div {
		
		
				flex:auto;
		-webkit-flex:auto;
			-ms-flex:auto;
		width: 250px;
		align-self: stretch;

	}


	footer {
		

		min-height:10%;
		margin-top:1em;
		border-top:1px solid black;

		}


	ul {
		color:white;
		margin:0;
		padding:0;

		}


	ul li {
		list-style-type:none;	
		border-bottom: 1px solid black;
		padding:1em;
		margin-bottom:.1em;
		margin-left:0;
		padding-left:1em;

		}

	
	h1 {
		background-color:#FA5858;
		color:white;
		padding:2em;

		}


	h2 {
		width:75%;
		color:white;
		padding-left:2em;
		padding-top:2em;
		
		}

	h3 {
		color:white;
		padding-left:3em;
		
		}


	#main > aside div h3 {
		
		padding-left: 0;
		
	}


	p {
		width: 60%;
		margin:3em;
		text-align:justify;
		text-indent:2em;
		
		}


	footer p {
	
		padding:1em 0;
		}





	img {
		width:75%;
		height:75%;
		
		}

	#portfolio div img {
		
		width: 100%;
		height: 100%;
		
		
	}

	#portfolio iframe {
		
		width: 100%;
		height: 100%;
		
	}


	#main aside div audio {
		
		width:80%;
		
	}


	#main aside div p {
		
		width:75%;
		margin: 0;
		padding: 3em 2em;
		font-size: small;
		text-indent: 0;
		text-align: left;
		
	}
		


	#fecha {
		
		color:#F5A9A9;
		font-size:small;
		
		}


	cite {
		color:#ccc;
		
		}


	a {
		text-decoration:none;
		color:white;
			
		}

	
	a:hover {
		
		color: black;
	
		}





/* ESTILO PARA TABLET */



@media all and (min-width: 641px) and (max-width: 1024px) {
	
	#main {
		
			    flex-flow: column;
		-webkit-flex-flow: column;
		
	}
	
	#main > aside; #main > nav; #main > section {
		
				order: 0;
		-webkit-order: 0;
		
	}
	
	
	#main > aside div h3 {
		
		padding-left: 2em;
		
	}
	
	#main > aside div img {
		width:50%;
		margin-left: 2em;
		
	}
	
	#main aside div p {
		
		padding: 3em 3em;
		font-size: medium;
		
	}
	
	#main aside div audio {
		
		width:90%;
		margin: 0 2em;
		
	}

	
}




/* ESTILO PARA MÓVIL */


@media all and (max-width: 640px) {
	
	
	
	body {
		
		background: none;
		font-size:1.2em;
		
		}



	#generic {
		width:100%;
		background-color:#FA5858;
		padding:2% 0;
		margin:0 auto;
		
		}
	
	
	
	#main, #portfolio {
		
				flex-flow: column;
		-webkit-flex-flow: column;
		
	}
	
	#main > aside; #main > nav; #main > section {
		
				order: 0;
		-webkit-order: 0;
		
	}
	
	#portfolio div {
		
		width: 100%;

	}
	
	#main > aside div h3 {
		
		padding-left: 2em;
		
	}
	
	#main > aside div img {
		width:50%;
		margin-left: 2em;
		
	}
	
	#main aside div p {
		
		padding: 3em 3em;
		font-size: medium;
		
	}
	
	#main aside div audio {
		
		width:90%;
		margin: 0 4%;
		
	}
	
	ul li {
		list-style-type:none;	
		padding:1em;
		margin-left:0;
		padding-left:1em;
		background-color: #666;

		}
		
	h1 {
		background-color:#FA5858;
		color:white;
		padding:2em .5em;

		}

	
}